<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #1d7fa7;
    }

    img {
      display: block;
    }

    #container {
      display: flex;
      margin-left: 20%;
      flex-direction: column;
      justify-content: center;
    }

    #main {
      display: flex;
      align-items: flex-start;
    }

    #content {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    #content .estate {
      border: 20px solid white;  
      margin-left: -70%;
      margin-top: 38%;
    }
    #content .estate #y1{
    margin-left:350px;
    margin-top: -30%;
    }
    #content .estate #y3{
    }
    #content .estate .y2 p{
     margin-left: 350px;
      font-size: 5px;
    }
    #nav {
      display: block;
      width: 867px;
      height: 50px;
      background-image: url("images/linkbg.jpg");
    }
    #nav ul li a {
      font-size: 10px;
      color: whitesmoke;
    }
    ul {
      margin-top: 10px;
      margin-left: 30px;

    }
    li {
      list-style-type: none;
      display: inline;
      margin-right: 4%;
      color: gray;
    }
    #nav ul li a:link {
      color: white;
      text-decoration: none;
    }
    #nav ul li a:hover {
      color: red;
      text-decoration: none;
    }
    #sidebar {
      border: 40px solid white;
      background-color: white;
    }
    #sidebar img {
      margin-left: -5%;
    }
    .text {
      margin-left: -5%;
      padding: 15px 0;
      font-size: 10px;
      color: gray;
    }
    .text p {
      padding: 5px 0;
    }
    #r {
      margin-left: -5%;
      border: 1px solid gray;
      margin-top: 20px;
    }
    #r1 {
      float: right;
      margin-right: -14%;
      width: 1px;
      height: 400px;
      background-color: gray;
    }

    #content .news {
      border: 25px solid white;
      background-color: white;
    }

    /*new.gif图片位置 */
    #content .news #r2 {
      margin-left: -8%;
      margin-top: 5%;
      padding-bottom: 20px;
    }

    /*ico.gif图片位置 */
    #content .news #r3 {
      margin-left: -10%;
    }

    /* 日期*/
    #content .news .r4 {
      font-size: 5px;
      width: auto;
      color: orange;
      margin-left: -5%;
      margin-top: -31px;
      padding-top: 20px;
    }

    /* new文本内容 */
    #content .news .r5 {
      font-size: 5px;
      margin-left: -5%;
      color: gray;
      padding: 1px 0;
    }

    #content .about {
      border: 30px solid white;
      background-color: white;
    }

    #content img {
      margin-top: 5%;
    }
    #content p {
      font-size: 7px;
      color: gray;
      padding: 5px 0;
    }
   #footer{
    background-image: url("images/footer1.gif");
    position:absolute;
    left:294px;
    margin-top: 37%;
   }
   #footer p{
    float: right;
    color: gray;
    font-size: 7px;
   }
  </style>
</head>

<body>
  <div id="container">
    <div id="logo"><img src="layout/logo.png" /></div>
    <div id="nav">
      <ul>
        <li>
          <a href=""> 首页</a>
        </li>
        <li>
          |
        </li>
        <li>
          <a href="">关于我们</a>
        </li>
        <li>
          |
        </li>
        <li>
          <a href="">新闻动态</a>
        </li>
        <li>
          |
        </li>
        <li>
          <a href="">楼盘展示</a>
        </li>
        <li>
          |
        </li>
        <li>
          <a href="">人才招聘</a>
        </li>
        <li>
          |
        </li>
        <li>
          <a href="">联系我们</a>
        </li>
        <li>
          |
        </li>
        <li>
          <a href="">留言反馈</a>
        </li>
      </ul>
    </div>
    <div id="main">
      <div id="sidebar">
        <img src="images/wel1.gif" />
        <div id="r1"></div>
        <img src="images/wel2.gif" />
        <div class="text">
          <p>温州广厦</p>
          <p>中国知名房地产企业</p>
          <p>中国建设行业信用3A级单位</p>
          <p>被中华全国工商业联合会宅产业</p>
          <p>商会推选为理事会员</p>
          <p>消费者信得过、放心开发商</p>
          <p>重质量创品牌优秀单位</p>
        </div>
        <img src="images/more.gif" />
        <div id="r"></div>
        <div class="text">
          <p>三盘领海</p>
          <p>全国最佳景谷别墅</p>
          <p>全国100个顶级别墅区之一</p>
        </div>
        <img src="images/more.gif" />
      </div>
      <div id="content">
        <div class="news">
          <img id="r2" src="images/news.gif" />
          <img id="r3" src="images/ico.gif">
          <p class="r4">2007-9-28 9:27:21</p>
          <p class="r5">央行：第二套住房贷款首付款比例不得低于40%</p>
          <img id="r3" src="images/ico.gif">
          <p class="r4">2007-8-20 10:4123</p>
          <p class="r5">智能化工程招标</p>
          <img id="r3" src="images/ico.gif">
          <p class="r4">2006-12-8 16:48:41</p>
          <p class="r5">温州NO.1豪宅即将出炉</p>
          <img id="r3" src="images/ico.gif">
          <p class="r4">2006-8-7 16:06:00</p>
          <p class="r5">塘厦金河大厦8月份进行预验收，并于年底交付...</p>
          <img id="r3" src="images/ico.gif">
          <p class="r4">2006-8-7 16:05:09</p>
          <p class="r5">三盘领海别墅区一开始预登记</p>
          <p class="r5"><img src="images/more.gif" /></p>
        </div>
        <div class="about">
          <img id="r6" src="images/about.gif" />
          <img id="r7" src="images/aboutimg.gif" />
          <p>温州广厦建设开发有限公司,法定代表人:余</p>
          <P>文龙:企业类型:有限责任公司:经营范围:房</P>
          <p>地产开发(凭资质证经营)。建筑材料销售。</p>
          <P>公司现有职工40余人,其中专业技术人员28人</P>
          <p>人(高级职称7人,中级职称21人)...</p>
          <img src="images/more.gif" />
        </div>
        <div class="estate">
          <img id ="y3"src="images/estate.gif" />
          <img id="y1" src="images/estate1.gif" />
          <div class="y2">
            <p>三盘领海</p>
            <p>三盘领海坐落在温州著名风景区一洞头三盘岛西</p>
            <p>边,海中湖中间,也是温州到洞头县城的必经之路,</p>
            <p>与温州市区50公里,与洞头县城只需3分钟</p>
            <p><img src="images/more.gif"></p>
          </div>
        </div>
      </div>
      <div id="footer">
       <img src="images/footer2.gif">
       <p>COPYRIGHT @ WZGS,2006,ALL RIGHTS RESERVED</p>
      </div>
    </div>
</body>

</html>